<template>
  <div class="hot_list">
    <h2 class="region">本日大类热门商品榜</h2>
    <div class="overview_today">
      <table class="today_table">
        <thead>
          <tr>
            <td>大类</td>
            <td>商品</td>
            <td>件数</td>
            <td>人数</td>
            <td>总支付额</td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item,i) in dataList"
            :key="i"
          >
            <td>{{item.category}}</td>
            <td>{{item.goods}}</td>
            <td>{{item.number}}</td>
            <td>{{item.people}}</td>
            <td>{{item.payments.toFixed(0)}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <h2 class="contribution">客户贡献结构</h2>
    <div
      class="structure"
      id="structureId"
    ></div>
  </div>
</template>

<script>
import moment from "moment";
import "echarts/lib/chart/map";
import "echarts/map/js/china.js";
import { TweenMax, Power2, TimelineLite } from "gsap";

export default {
  name: "hot_list",
  components: {},
  data() {
    return {
      timer: null,
      dataList: [
        {
          category: "A类",
          goods: "A商品",
          number: 1000,
          people: 100,
          payments: 99999
        },
        {
          category: "B类",
          goods: "B商品",
          number: 1300,
          people: 120,
          payments: 43532
        },
        {
          category: "C类",
          goods: "C商品",
          number: 1000,
          people: 100,
          payments: 666533
        },
        {
          category: "D类",
          goods: "D商品",
          number: 1000,
          people: 100,
          payments: 55444
        },
        {
          category: "E类",
          goods: "E商品",
          number: 5000,
          people: 100,
          payments: 34344
        },
        {
          category: "F类",
          goods: "F商品",
          number: 5000,
          people: 100,
          payments: 5888
        },
        {
          category: "G类",
          goods: "G商品",
          number: 5880,
          people: 100,
          payments: 23444
        },
        {
          category: "H类",
          goods: "H商品",
          number: 5000,
          people: 100,
          payments: 65445
        }
      ]
    };
  },
  mounted() {
    this.getHotList();
    this.setTimer();
  },



  //  watch: {
  //     dataList: {
  //       handler: function(newValue, oldValue) {
  //     //    console.log('this.$data',newValue,this.$data);//this.$data.dataList[0].number
  //        // TweenLite.to(this.$data, 0.5, {item: newValue });

  //           newValue.forEach((item,i)=>{
  //               TweenLite.to(this.$data.dataList[i], 0.5, {'payments': item.number*item.people });
  //                console.log('newValue',oldValue);
  //                return false;

  //           })
  //       },
  //       deep: true
  //     }
  //  },

  methods: {

    setTimer() {
      //clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.dataList.forEach((item, i) => {
          this.$set(this.dataList[i], "number", parseInt(Math.random() * 100));
          TweenLite.to(this.dataList[i], 0.5, {
            payments: item.number * item.people
          });
         
        });
         
      }, 1000);
     
    },
    

    getHotList() {
      //clearInterval(timeer);

      var myChart = this.$echarts.init(document.getElementById("structureId"));

      var option = {
        title: {
          text: "",
          subtext: "",
          top: "12%",
          left: "10%",
          subtextStyle: {
            color: "#fff",
            fontWeight: 800,
            fontSize: 16
          },
          textStyle: {
            color: "#fff",
            fontSize: 28
          }
        },

        color: ["#5a5e99", "#aee1fc", "#acd598", "#6ea4b8"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          orient: "horizontal",
          x: "center",
          y: "0",
          textStyle: {
            color: "#FFFFFF"
          },
          data: ["一次客", "回头客", "忠诚客", "流失客"]
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "10%",
          containLabel: true,
          z: 22
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#f2f2f2"]
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false,
              // color: "rgb(170,170,170)",
              formatter: "{value} "
            }
          }
        ],
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#aee1fc"
              }
            },
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLabel: {
              show: true,
              color: "#fff",
              fontSize: 16
            },
            data: ["金额", "人数", "订单数"]
          }
        ],
        series: [
          {
            name: "一次客",
            type: "bar",
            stack: "总量",
            barWidth: "60px",
            data: [80, 210, 100]
          },
          {
            name: "回头客",
            type: "bar",
            stack: "总量",
            barWidth: "60px",
            data: [90, 232, 251]
          },
          {
            name: "忠诚客",
            type: "bar",
            stack: "总量",
            barWidth: "60px",
            data: [90, 232, 231]
          },
          {
            name: "流失客",
            type: "bar",
            stack: "总量",
            barWidth: "60px",
            data: [700, 700, 700]
          },
          {
            name: "一次客",
            type: "line",
            symbol: "none",
            data: [40, 105, 50],
            formatter: ""
          },
          {
            name: "回头客",
            type: "line",
            symbol: "none",
            data: [125, 326, 225.5]
          },
          {
            name: "忠诚客",
            type: "line",
            symbol: "none",
            data: [215, 548, 476]
          },
          {
            name: "流失客",
            type: "line",
            symbol: "none",
            data: [610, 1024, 932]
          }
        ]
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.hot_list {
  width: 500px;
  height: 100vh;
  float: left;
  .overview_today {
    .today_table {
      border-collapse: collapse;
      color: #fff;
      text-align: center;
      background: #131927;
      width: 100%;
      thead {
        tr td {
          color: #816dc2;
        }
      }
      tr {
        height: 40px;
        td {
          border: 1px solid #293643;
          width: 100px;
        }
      }
    }
  }
  .contribution {
    margin: 40px auto 16px;
  }
  .structure {
    width: 500px;
    height: 300px;
  }
}
</style>
